<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 修改 favicon 为 base64 图标 -->
    <link rel="icon" href="./image/logo.png" type="image/png" />
    <title>飞牛影视</title>
    <style>
        body {
            background: url("./image/bg-login.webp") no-repeat center center fixed;
            background-size: cover;
            /* 拉伸铺满整个页面 */
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
                'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial,
                sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            color: #fff;
        }

        .login-container {
            width: 380px;
            background: rgba(37, 43, 55, 0.5);
            /* 半透明背景 */
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

            backdrop-filter: blur(12px);
            /* 毛玻璃模糊效果 */
            -webkit-backdrop-filter: blur(12px);
            /* 兼容 Safari */
            border: 1px solid rgba(255, 255, 255, 0.2);
            /* 轻微边框，增强质感 */
        }

        .logo {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }

        .logo img {
            width: 120px;
            height: auto;
        }

        .logo-info {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 15px;
            flex-wrap: wrap;
        }

        .code-by {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            font-style: italic;
            white-space: nowrap;
        }

        .github-link {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.2s ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            white-space: nowrap;
        }

        .github-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.3);
            text-decoration: none;
        }

        /* 在小屏幕上垂直排列 */
        @media (max-width: 400px) {
            .logo-info {
                flex-direction: column;
                gap: 8px;
            }
        }

        .form-group {
            margin-bottom: 20px;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        input[type='text'],
        input[type='password'] {
            width: 100%;
            padding: 12px 16px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(47, 53, 66, 0.4);
            /* 半透明输入框 */
            backdrop-filter: blur(6px);
            color: #fff;
            box-sizing: border-box;
            font-size: 14px;
        }

        input[type='text']:focus,
        input[type='password']:focus {
            outline: none;
            border-color: #3370ff;
        }

        .switch-container {
            display: flex;
            align-items: center;
            margin-bottom: 24px;
        }

        .switch-label {
            margin-left: 10px;
            font-size: 14px;
        }

        /* 开关样式 */
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #3c4250;
            transition: 0.4s;
            border-radius: 24px;
        }

        .slider:before {
            position: absolute;
            content: '';
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }

        input:checked+.slider {
            background-color: #3370ff;
        }

        input:checked+.slider:before {
            transform: translateX(20px);
        }

        .login-btn {
            width: 100%;
            padding: 12px;
            background-color: #3370ff;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: not-allowed;
            opacity: 0.6;
            transition: background-color 0.2s, opacity 0.2s, cursor 0.2s;
        }

        .login-btn.enabled {
            cursor: pointer;
            opacity: 1;
        }

        .login-btn.enabled:hover {
            background-color: #2856c4;
        }

        /* 版本信息样式 */
        .version-info {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .version-text {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }

        .update-btn {
            padding: 6px 12px;
            background-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .update-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border-color: rgba(255, 255, 255, 0.3);
        }

        .update-btn:active {
            transform: translateY(1px);
        }

        .update-btn.checking {
            cursor: not-allowed;
            opacity: 0.6;
        }

        /* 代理设置按钮样式 */
        .proxy-settings-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            color: rgba(255, 255, 255, 0.8);
            z-index: 1000;
        }

        .proxy-settings-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            color: white;
            transform: rotate(90deg);
        }

        /* 代理设置面板样式 */
        .proxy-panel {
            position: fixed;
            bottom: 70px;
            right: 20px;
            width: 280px;
            background: rgba(37, 43, 55, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            backdrop-filter: blur(20px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            z-index: 1001;
            transform: translateY(10px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .proxy-panel.show {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .proxy-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            color: white;
            font-size: 14px;
            font-weight: 500;
        }

        .proxy-close-btn {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.7);
            font-size: 18px;
            cursor: pointer;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .proxy-close-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

        .proxy-panel-content {
            padding: 16px;
        }

        .proxy-switch-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 14px;
        }

        .proxy-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .proxy-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .proxy-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.2);
            transition: .3s;
            border-radius: 24px;
        }

        .proxy-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: .3s;
            border-radius: 50%;
        }

        .proxy-switch input:checked + .proxy-slider {
            background-color: #3370ff;
        }

        .proxy-switch input:checked + .proxy-slider:before {
            transform: translateX(20px);
        }

        .proxy-url-row {
            margin-bottom: 16px;
        }

        .proxy-url-row label {
            display: block;
            color: rgba(255, 255, 255, 0.9);
            font-size: 12px;
            margin-bottom: 6px;
        }

        .proxy-url-row input {
            width: 100%;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            color: white;
            font-size: 13px;
            outline: none;
            transition: all 0.2s;
            box-sizing: border-box;
        }

        .proxy-url-row input:focus {
            border-color: #3370ff;
            background: rgba(255, 255, 255, 0.15);
        }

        .proxy-url-row input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .proxy-panel-footer {
            display: flex;
            justify-content: flex-end;
        }

        .proxy-save-btn {
            padding: 8px 16px;
            background: #3370ff;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .proxy-save-btn:hover {
            background: #2856c4;
        }

        .proxy-save-btn:active {
            transform: translateY(1px);
        }

        .proxy-save-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        input.error {
            border: 1px solid red !important;
            /* 输入框红色边框 */
        }

        .error-msg {
            color: red;
            /* 提示文字红色 */
            font-size: 12px;
            /* 小字体 */
            margin-top: 5px;
            /* 上方间距 */
        }

        input[type="text"],
        input[type="password"] {
            -webkit-user-modify: read-write-plaintext-only;
            /* 取消拼写波浪线 */
        }

        /* 禁止所有元素拖拽 */
        * {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
        }

        /* 特别针对图片禁止拖拽和选中 */
        img {
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            -o-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /* Logo图片完全禁止交互 */
        .logo img {
            pointer-events: none;
        }

        /* 密码显示按钮 */
        .password-toggle {
            position: absolute;
            right: 12px;
            top: 46px; /* 精确计算：label(18px) + margin(8px) + border(1px) + padding(12px) + 文本中心(7px) */
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 16px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .password-toggle:hover {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.1);
        }

        /* 历史记录按钮 */
        .history-btn {
            position: absolute;
            right: 12px;
            top: 46px; /* 精确计算：label(18px) + margin(8px) + border(1px) + padding(12px) + 文本中心(7px) */
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            font-size: 16px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            transition: all 0.2s;
        }

        .history-btn:hover {
            color: rgba(255, 255, 255, 0.9);
            background: rgba(255, 255, 255, 0.1);
        }

        /* 历史记录下拉框 */
        .history-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            left: 0;
            background: rgba(37, 43, 55, 0.95);
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-height: 240px;
            margin-top: 4px;
            overflow-y: auto;
            z-index: 1000;
            opacity: 0;
            transform: translateY(-10px);
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .history-dropdown.show {
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
        }

        .history-item {
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: background-color 0.2s;
            position: relative;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .history-item:hover {
            background-color: rgba(51, 112, 255, 0.2);
        }

        .history-content {
            flex: 1;
            cursor: pointer;
        }

        .history-delete {
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            font-size: 14px;
            padding: 4px 6px;
            border-radius: 3px;
            transition: all 0.2s;
            margin-left: 8px;
            opacity: 0;
            transform: scale(0.8);
        }

        .history-item:hover .history-delete {
            opacity: 1;
            transform: scale(1);
        }

        .history-delete:hover {
            color: #ff4757;
            background: rgba(255, 71, 87, 0.1);
        }

        .history-account {
            font-size: 14px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 4px;
        }

        .history-domain {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
        }

        .no-history {
            padding: 16px;
            text-align: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
        }

        .clear-history {
            padding: 8px 16px;
            text-align: center;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.6);
            font-size: 12px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .clear-history:hover {
            background-color: rgba(255, 0, 0, 0.2);
            color: rgba(255, 255, 255, 0.9);
        }

        /* 为了给按钮留出空间，调整input的右padding */
        .form-group.has-button input {
            padding-right: 40px;
        }

        /* 自定义滚动条 */
        .history-dropdown::-webkit-scrollbar {
            width: 6px;
        }

        .history-dropdown::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        .history-dropdown::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }

        .history-dropdown::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        /* 自定义确认对话框 */
        .custom-confirm {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .custom-confirm.show {
            opacity: 1;
            visibility: visible;
        }

        .confirm-dialog {
            background: rgba(37, 43, 55, 0.95);
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 300px;
            max-width: 400px;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .custom-confirm.show .confirm-dialog {
            transform: scale(1);
        }

        .confirm-title {
            font-size: 16px;
            font-weight: 500;
            color: #fff;
            margin-bottom: 16px;
        }

        .confirm-message {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .confirm-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .confirm-btn {
            padding: 8px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .confirm-btn.cancel {
            background: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.8);
        }

        .confirm-btn.cancel:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .confirm-btn.confirm {
            background: #ff4757;
            color: #fff;
        }

        .confirm-btn.confirm:hover {
            background: #ff3838;
        }

        /* 自定义消息弹窗 */
        .custom-message {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .custom-message.show {
            opacity: 1;
            visibility: visible;
        }

        .message-dialog {
            background: rgba(37, 43, 55, 0.95);
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            min-width: 300px;
            max-width: 400px;
            text-align: center;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

        .custom-message.show .message-dialog {
            transform: scale(1);
        }

        .message-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            position: relative;
        }

        .message-icon.error {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 107, 107, 0.5);
            color: #ff6b6b;
            box-shadow: none;
        }

        .message-icon.success {
            background: linear-gradient(135deg, #2ed573, #26d0ce);
            color: #fff;
            box-shadow: 0 4px 15px rgba(46, 213, 115, 0.3);
        }

        .message-icon.warning {
            background: linear-gradient(135deg, #ffa502, #ff6348);
            color: #fff;
            box-shadow: 0 4px 15px rgba(255, 165, 2, 0.3);
        }

        .message-icon.info {
            background: linear-gradient(135deg, #3370ff, #2856c4);
            color: #fff;
            box-shadow: 0 4px 15px rgba(51, 112, 255, 0.3);
        }

        .message-title {
            font-size: 20px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
        }

        .message-dialog.error .message-title {
            color: rgba(255, 255, 255, 0.9);
        }

        .message-content {
            color: rgba(255, 255, 255, 0.85);
            margin-bottom: 28px;
            line-height: 1.6;
            font-size: 15px;
        }

        .message-button {
            padding: 12px 32px;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            background: linear-gradient(135deg, #3370ff, #2856c4);
            color: #fff;
            min-width: 100px;
            box-shadow: 0 4px 15px rgba(51, 112, 255, 0.3);
            position: relative;
            overflow: hidden;
        }

        .message-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(51, 112, 255, 0.4);
        }

        .message-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(51, 112, 255, 0.3);
        }
    </style>
</head>

<body>
    <div class="login-container">
        <div class="logo">
            <!-- 修改 logo 图标为 base64 -->
            <img src="./image/logo.png" alt="飞牛影视" />
            <div class="logo-info">
                <span class="code-by">code by Tag mig hånden</span>
                <a href="https://github.com/QiaoKes/fntv-electron" class="github-link" target="_blank" rel="noopener noreferrer">github地址</a>
            </div>
        </div>
        <div class="form-group has-button">
            <label for="domain">域名/IP地址</label>
            <input type="text" id="domain" placeholder="请输入服务器域名或IP地址" spellcheck="false" tabindex="1" />
            <button type="button" class="history-btn" id="historyBtn" title="选择历史记录">📝</button>
            <div class="history-dropdown" id="historyDropdown">
                <div class="no-history">暂无历史记录</div>
            </div>
            <div id="domainError" class="error-msg" style="display:none;">请正确填写IPV4、IPV6或者域名</div>
        </div>
        <div class="form-group">
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名" spellcheck="false" tabindex="2" />
        </div>
        <div class="form-group has-button">
            <label for="password">密码</label>
            <input type="password" id="password" placeholder="请输入密码" spellcheck="false" tabindex="3" />
            <button type="button" class="password-toggle" id="passwordToggle" title="显示/隐藏密码">👁</button>
        </div>
        <div class="switch-container">
            <label class="switch">
                <input type="checkbox" id="httpsSwitch" />
                <span class="slider"></span>
            </label>
            <span class="switch-label">HTTPS安全访问</span>
        </div>
        <button class="login-btn" id="loginBtn" disabled>登录</button>
        
        <!-- 版本信息和更新检查 -->
        <div class="version-info">
            <div class="version-text" id="versionText">版本 1.6.4</div>
            <button class="update-btn" id="updateBtn" title="检查更新">检查更新</button>
        </div>
    </div>

    <!-- 代理设置按钮（右上角） -->
    <div class="proxy-settings-btn" id="proxySettingsBtn" title="代理设置">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <path d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5 3.5 3.5 0 0 1-3.5 3.5M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
        </svg>
    </div>

    <!-- 代理设置面板 -->
    <div class="proxy-panel" id="proxyPanel">
        <div class="proxy-panel-header">
            <span>代理设置</span>
            <button class="proxy-close-btn" id="proxyCloseBtn">×</button>
        </div>
        <div class="proxy-panel-content">
            <div class="proxy-switch-row">
                <span>启用代理</span>
                <label class="proxy-switch">
                    <input type="checkbox" id="proxyEnabledSwitch" checked>
                    <span class="proxy-slider"></span>
                </label>
            </div>
            <div class="proxy-url-row">
                <label for="proxyUrlInput">代理地址:</label>
                <input type="text" id="proxyUrlInput" placeholder="https://ghfast.top" />
            </div>
            <div class="proxy-switch-row">
                <span>隐藏原有播放按钮</span>
                <label class="proxy-switch">
                    <input type="checkbox" id="hideOriginalPlayButtonSwitch" checked>
                    <span class="proxy-slider"></span>
                </label>
            </div>
            <div class="proxy-panel-footer">
                <button class="proxy-save-btn" id="proxySaveBtn">保存</button>
            </div>
        </div>
    </div>

    <!-- 自定义确认对话框 -->
    <div class="custom-confirm" id="customConfirm">
        <div class="confirm-dialog">
            <div class="confirm-title">确认操作</div>
            <div class="confirm-message" id="confirmMessage">确定要执行此操作吗？</div>
            <div class="confirm-buttons">
                <button class="confirm-btn cancel" id="confirmCancel">取消</button>
                <button class="confirm-btn confirm" id="confirmOk">确定</button>
            </div>
        </div>
    </div>

    <!-- 自定义消息弹窗 -->
    <div class="custom-message" id="customMessage">
        <div class="message-dialog">
            <div class="message-icon" id="messageIcon">ℹ️</div>
            <div class="message-title" id="messageTitle">提示</div>
            <div class="message-content" id="messageContent">这里是消息内容</div>
            <button class="message-button" id="messageButton">确定</button>
        </div>
    </div>

    <script>
        const { ipcRenderer } = require('electron'); // 渲染进程可用
        
        // 简化的日志接口 - 完全透明使用
        // 不再需要手动发送IPC，直接使用即可
        // window.log 已经通过 contextBridge 暴露，会自动处理IPC通信和数据脱敏
        
        const loginBtn = document.getElementById('loginBtn');
        const domainInput = document.getElementById('domain');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const passwordToggle = document.getElementById('passwordToggle');
        const historyBtn = document.getElementById('historyBtn');
        const historyDropdown = document.getElementById('historyDropdown');
        const customConfirm = document.getElementById('customConfirm');
        const confirmMessage = document.getElementById('confirmMessage');
        const confirmCancel = document.getElementById('confirmCancel');
        const confirmOk = document.getElementById('confirmOk');
        const customMessage = document.getElementById('customMessage');
        const messageIcon = document.getElementById('messageIcon');
        const messageTitle = document.getElementById('messageTitle');
        const messageContent = document.getElementById('messageContent');
        const messageButton = document.getElementById('messageButton');
        const versionText = document.getElementById('versionText');
        const updateBtn = document.getElementById('updateBtn');
        const proxySettingsBtn = document.getElementById('proxySettingsBtn');
        const proxyPanel = document.getElementById('proxyPanel');
        const proxyCloseBtn = document.getElementById('proxyCloseBtn');
        const proxyEnabledSwitch = document.getElementById('proxyEnabledSwitch');
        const proxyUrlInput = document.getElementById('proxyUrlInput');
        const proxySaveBtn = document.getElementById('proxySaveBtn');
        const hideOriginalPlayButtonSwitch = document.getElementById('hideOriginalPlayButtonSwitch');
        
        let historyData = [];
        let confirmCallback = null;

        // 自定义确认对话框函数
        function showCustomConfirm(message, callback) {
            confirmMessage.textContent = message;
            confirmCallback = callback;
            customConfirm.classList.add('show');
        }

        function hideCustomConfirm() {
            customConfirm.classList.remove('show');
            confirmCallback = null;
            // 对话框关闭后立即恢复焦点
            setTimeout(() => {
                domainInput.focus();
            }, 100);
        }

        // 确认对话框事件监听
        confirmCancel.addEventListener('click', () => {
            hideCustomConfirm();
        });

        confirmOk.addEventListener('click', () => {
            if (confirmCallback) {
                confirmCallback();
            }
            hideCustomConfirm();
        });

        // 点击对话框外部区域关闭
        customConfirm.addEventListener('click', (e) => {
            if (e.target === customConfirm) {
                hideCustomConfirm();
            }
        });

        // ESC键关闭对话框
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && customConfirm.classList.contains('show')) {
                hideCustomConfirm();
            }
            if (e.key === 'Escape' && customMessage.classList.contains('show')) {
                hideCustomMessage();
            }
        });

        // 自定义消息弹窗函数
        function showCustomMessage(type, title, content) {
            // 清除之前的类型类
            const messageDialog = document.querySelector('.message-dialog');
            messageDialog.classList.remove('error', 'success', 'warning', 'info');
            
            // 添加当前类型类
            messageDialog.classList.add(type);
            
            // 设置图标和样式
            messageIcon.className = `message-icon ${type}`;
            
            // 对于错误类型，隐藏图标以减少视觉冲击
            if (type === 'error') {
                messageIcon.style.display = 'none';
            } else {
                messageIcon.style.display = 'flex';
                switch(type) {
                    case 'success':
                        messageIcon.textContent = '✓';
                        break;
                    case 'warning':
                        messageIcon.textContent = '!';
                        break;
                    case 'info':
                    default:
                        messageIcon.textContent = 'i';
                        break;
                }
            }
            
            messageTitle.textContent = title;
            messageContent.textContent = content;
            customMessage.classList.add('show');
        }

        function hideCustomMessage() {
            customMessage.classList.remove('show');
            // 消息弹窗关闭后恢复焦点
            setTimeout(() => {
                domainInput.focus();
            }, 100);
        }

        // 消息弹窗事件监听
        messageButton.addEventListener('click', () => {
            hideCustomMessage();
        });

        // 点击消息弹窗外部区域关闭
        customMessage.addEventListener('click', (e) => {
            if (e.target === customMessage) {
                hideCustomMessage();
            }
        });

        // 强制恢复焦点的通用函数
        function restoreFocus() {
            try {
                // 确保输入框可用
                domainInput.disabled = false;
                domainInput.readOnly = false;
                
                // 多种方式尝试恢复焦点
                domainInput.focus();
                domainInput.select();
                
                // 如果还是无法获取焦点，尝试点击
                const clickEvent = new MouseEvent('click', {
                    view: window,
                    bubbles: true,
                    cancelable: true
                });
                domainInput.dispatchEvent(clickEvent);
                
                // 强制设置光标位置
                if (domainInput.setSelectionRange) {
                    const len = domainInput.value.length;
                    domainInput.setSelectionRange(len, len);
                }
            } catch (error) {
                window.log.error('恢复焦点失败:', error);
            }
        }

        function isValidDomainOrIP(value) {
            const domainRegex = /^([\u4e00-\u9fa5a-zA-Z0-9-]+\.)+[\u4e00-\u9fa5a-zA-Z]{2,}(:\d+)?$/;
            const ipv4Regex = /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}(:\d+)?$/;
            const ipv6Regex = /^\[((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\](:\d+)?$/;
            return domainRegex.test(value) || ipv4Regex.test(value) || ipv6Regex.test(value);
        }

        function checkInputs() {
            const domain = domainInput.value.trim();
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();
            const domainError = document.getElementById('domainError');

            if (domain && isValidDomainOrIP(domain) && username && password) {
                loginBtn.disabled = false;
                loginBtn.classList.add('enabled');
            } else {
                loginBtn.disabled = true;
                loginBtn.classList.remove('enabled');
            }
        }

        // 失去焦点时显示红色提示
        domainInput.addEventListener('blur', function () {
            const domain = domainInput.value.trim();
            if (domain && !isValidDomainOrIP(domain)) {
                domainInput.classList.add('error');
                domainError.style.display = 'block';
            } else {
                domainInput.classList.remove('error');
                domainError.style.display = 'none';
            }
        });

        domainInput.addEventListener('input', checkInputs);
        usernameInput.addEventListener('input', checkInputs);
        passwordInput.addEventListener('input', checkInputs);

        // 登录逻辑
        loginBtn.addEventListener('click', function () {
            if (loginBtn.disabled) return;
            
            // 设置登录中状态
            const originalText = loginBtn.textContent;
            loginBtn.textContent = '登录中...';
            loginBtn.disabled = true;
            loginBtn.classList.remove('enabled');
            
            const domain = domainInput.value.trim();
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();
            const useHttps = document.getElementById('httpsSwitch').checked;

            window.log.info('登录信息:', { domain, username, password, useHttps });
            
            const loginData = {
                domain: domain,
                username: username,
                password: password,
                useHttps: useHttps
            };

            // 发送登录请求
            ipcRenderer.send('login', loginData);
            
            // 5秒后恢复按钮状态（防止无响应）
            const timeoutId = setTimeout(() => {
                loginBtn.textContent = originalText;
                checkInputs(); // 重新检查输入状态
            }, 5000);
            
            // 监听登录结果，无论成功还是失败都恢复按钮状态
            const handleLoginResult = () => {
                clearTimeout(timeoutId);
                loginBtn.textContent = originalText;
                checkInputs();
            };
            
            // 临时监听器，处理完后自动移除
            const tempErrorListener = () => {
                handleLoginResult();
                ipcRenderer.off('login-error', tempErrorListener);
            };
            
            const tempSuccessListener = () => {
                handleLoginResult();
                ipcRenderer.off('login-success', tempSuccessListener);
            };
            
            ipcRenderer.once('login-error', tempErrorListener);
            ipcRenderer.once('login-success', tempSuccessListener);
        });

        // Enter 键触发
        document.addEventListener('keypress', function (e) {
            if (e.key === 'Enter' && !loginBtn.disabled) {
                loginBtn.click();
            }
        });

        // 密码显示/隐藏切换
        passwordToggle.addEventListener('click', function () {
            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordToggle.textContent = '🙈';
                passwordToggle.title = '隐藏密码';
            } else {
                passwordInput.type = 'password';
                passwordToggle.textContent = '👁';
                passwordToggle.title = '显示密码';
            }
        });

        // 历史记录按钮点击
        historyBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            historyDropdown.classList.toggle('show');
        });

        // 点击其他地方关闭历史记录下拉框
        document.addEventListener('click', function (e) {
            if (!historyDropdown.contains(e.target) && e.target !== historyBtn) {
                historyDropdown.classList.remove('show');
            }
        });

        // 渲染历史记录列表
        function renderHistoryList() {
            if (!historyData || historyData.length === 0) {
                historyDropdown.innerHTML = '<div class="no-history">暂无历史记录</div>';
                return;
            }

            const historyHtml = historyData.map((item, index) => `
                <div class="history-item" data-domain="${item.domain}" data-account="${item.account}" data-password="${item.password}" data-use-https="${item.useHttps || false}" data-index="${index}">
                    <div class="history-content">
                        <div class="history-account">${item.account}</div>
                        <div class="history-domain">${item.domain}${item.useHttps ? ' (HTTPS)' : ' (HTTP)'}</div>
                    </div>
                    <button class="history-delete" data-index="${index}" title="删除此记录">×</button>
                </div>
            `).join('');

            const clearButton = historyData.length > 0 ? '<div class="clear-history" id="clearHistoryBtn">清除所有历史记录</div>' : '';
            historyDropdown.innerHTML = historyHtml + clearButton;

            // 为历史记录项添加点击事件
            historyDropdown.querySelectorAll('.history-content').forEach(content => {
                content.addEventListener('click', function () {
                    const item = this.parentNode;
                    const domain = item.dataset.domain;
                    const account = item.dataset.account;
                    const password = item.dataset.password;
                    const useHttps = item.dataset.useHttps === 'true';

                    domainInput.value = domain;
                    usernameInput.value = account;
                    passwordInput.value = password;
                    document.getElementById('httpsSwitch').checked = useHttps;

                    // 关闭下拉框
                    historyDropdown.classList.remove('show');
                    
                    // 检查输入状态
                    checkInputs();
                });
            });

            // 为删除按钮添加点击事件
            historyDropdown.querySelectorAll('.history-delete').forEach(deleteBtn => {
                deleteBtn.addEventListener('click', function (e) {
                    e.stopPropagation(); // 防止触发父元素的点击事件
                    e.preventDefault(); // 防止默认行为
                    
                    const index = parseInt(this.dataset.index);
                    const item = historyData[index];
                    
                    // 立即关闭下拉框
                    historyDropdown.classList.remove('show');
                    
                    // 使用自定义确认对话框
                    showCustomConfirm(
                        `确定要删除 ${item.account}@${item.domain} 的登录记录吗？`,
                        () => {
                            // 发送删除单个历史记录的请求
                            ipcRenderer.send('delete-history-item', { domain: item.domain, account: item.account });
                        }
                    );
                });
            });

            // 清除历史记录按钮事件
            const clearBtn = document.getElementById('clearHistoryBtn');
            if (clearBtn) {
                clearBtn.addEventListener('click', function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    
                    // 立即关闭下拉框
                    historyDropdown.classList.remove('show');
                    
                    // 使用自定义确认对话框
                    showCustomConfirm(
                        '确定要清除所有历史记录吗？',
                        () => {
                            ipcRenderer.send('clear-history');
                            historyData = [];
                            renderHistoryList();
                        }
                    );
                });
            }
        }

        // 加载配置和历史记录
        function loadConfigData() {
            ipcRenderer.send('get-config');
        }

        // 监听配置数据返回
        ipcRenderer.on('config-data', (event, data) => {
            const { config, history } = data;
            historyData = history || [];
            
            // 如果有当前配置，填充到表单中
            if (config && config.domain) {
                // 去除掉http://和https://
                domainInput.value = config.domain.replace(/^https?:\/\//, '');
                // 根据保存的useHttps设置复选框状态
                if (config.useHttps) {
                    document.getElementById('httpsSwitch').checked = config.useHttps;
                }
            }
            if (config && config.account) {
                usernameInput.value = config.account;
            }
            
            // 渲染历史记录
            renderHistoryList();
            
            // 检查输入状态
            checkInputs();
        });

        // 监听历史记录删除成功
        ipcRenderer.on('history-item-deleted', (event, data) => {
            // 重新加载配置数据
            loadConfigData();
        });

        // 监听登录错误消息
        ipcRenderer.on('login-error', (event, data) => {
            const { title, message } = data;
            showCustomMessage('error', title, message);
        });

        // 监听登录成功消息
        ipcRenderer.on('login-success', (event, data) => {
            const { title, message } = data;
            showCustomMessage('success', title, message);
        });

        // 添加额外的焦点管理事件监听器
        document.addEventListener('click', function(e) {
            // 如果点击的不是历史记录相关元素，确保输入框可以正常获取焦点
            if (!historyDropdown.contains(e.target) && 
                e.target !== historyBtn && 
                !e.target.classList.contains('history-delete') &&
                e.target.id !== 'clearHistoryBtn') {
                // 如果没有其他输入元素获得焦点，默认聚焦到域名输入框
                setTimeout(() => {
                    if (!document.activeElement || 
                        (document.activeElement.tagName !== 'INPUT' && 
                         document.activeElement.tagName !== 'BUTTON')) {
                        domainInput.focus();
                    }
                }, 50);
            }
        });

        // 监听窗口焦点事件
        window.addEventListener('focus', function() {
            // 当窗口重新获得焦点时，确保输入框可以正常工作
            setTimeout(restoreFocus, 100);
        });

        // GitHub链接点击事件处理
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('github-link')) {
                e.preventDefault(); // 阻止默认行为
                const url = e.target.href;
                // 使用Electron的shell模块在外部浏览器打开链接
                const { shell } = require('electron');
                shell.openExternal(url);
            }
        });

        // 禁止拖拽事件
        document.addEventListener('dragstart', function(e) {
            e.preventDefault();
            return false;
        });

        // 禁止拖拽效果
        document.addEventListener('drag', function(e) {
            e.preventDefault();
            return false;
        });

        // 禁止拖拽结束
        document.addEventListener('dragend', function(e) {
            e.preventDefault();
            return false;
        });

        // 更新检查相关函数
        function initVersionInfo() {
            // 获取版本信息
            ipcRenderer.send('get-version');
        }

        function handleUpdateCheck() {
            const btn = updateBtn;
            const originalText = btn.textContent;
            
            // 设置检查中状态
            btn.textContent = '检查中...';
            btn.classList.add('checking');
            btn.disabled = true;
            
            // 发送检查更新请求
            ipcRenderer.send('check-update');
            
            // 5秒后恢复按钮状态（防止无响应）
            setTimeout(() => {
                btn.textContent = originalText;
                btn.classList.remove('checking');
                btn.disabled = false;
            }, 5000);
        }

        // 更新按钮点击事件
        updateBtn.addEventListener('click', handleUpdateCheck);

        // 监听版本信息
        ipcRenderer.on('version-info', (event, data) => {
            if (data && data.version) {
                versionText.textContent = `版本 ${data.version}`;
            }
        });

        // 代理设置相关函数
        function initProxySettings() {
            // 获取当前代理设置
            ipcRenderer.send('get-download-proxy');
            // 获取当前播放按钮配置
            ipcRenderer.send('get-play-button-config');
        }

        function toggleProxyPanel() {
            proxyPanel.classList.toggle('show');
        }

        function closeProxyPanel() {
            proxyPanel.classList.remove('show');
        }

        function saveProxySettings() {
            const enabled = proxyEnabledSwitch.checked;
            const proxyUrl = proxyUrlInput.value.trim();
            const hideOriginalPlayButton = hideOriginalPlayButtonSwitch.checked;
            
            // 保存代理设置
            ipcRenderer.send('set-download-proxy', { 
                enabled: enabled,
                proxyUrl: proxyUrl || 'https://ghfast.top'
            });
            
            // 保存播放按钮配置
            ipcRenderer.send('set-play-button-config', {
                hideOriginalPlayButton: hideOriginalPlayButton
            });
            
            // 显示保存状态
            const originalText = proxySaveBtn.textContent;
            proxySaveBtn.textContent = '保存中...';
            proxySaveBtn.disabled = true;
            
            // 3秒后恢复按钮状态
            setTimeout(() => {
                proxySaveBtn.textContent = originalText;
                proxySaveBtn.disabled = false;
                closeProxyPanel(); // 保存后关闭面板
            }, 1000);
        }

        // 代理设置事件监听
        proxySettingsBtn.addEventListener('click', toggleProxyPanel);
        proxyCloseBtn.addEventListener('click', closeProxyPanel);
        proxySaveBtn.addEventListener('click', saveProxySettings);

        // 点击面板外部关闭面板
        document.addEventListener('click', (e) => {
            if (!proxyPanel.contains(e.target) && !proxySettingsBtn.contains(e.target)) {
                closeProxyPanel();
            }
        });

        // 监听代理设置响应
        ipcRenderer.on('download-proxy-info', (event, data) => {
            if (data) {
                proxyEnabledSwitch.checked = data.enabled !== false; // 默认开启
                proxyUrlInput.value = data.proxyUrl || 'https://ghfast.top';
            }
        });

        // 监听播放按钮配置响应
        ipcRenderer.on('play-button-config-info', (event, data) => {
            if (data) {
                hideOriginalPlayButtonSwitch.checked = data.hideOriginalPlayButton !== false; // 默认隐藏
            }
        });

        ipcRenderer.on('download-proxy-set', (event, data) => {
            if (data && data.success) {
                window.log.info('代理设置保存成功');
            } else {
                window.log.error('代理设置保存失败:', data.error);
            }
        });

        ipcRenderer.on('play-button-config-set', (event, data) => {
            if (data && data.success) {
                window.log.info('播放按钮配置保存成功');
            } else {
                window.log.error('播放按钮配置保存失败:', data.error);
            }
        });

        // 页面加载完成后读取配置
        window.addEventListener('DOMContentLoaded', function () {
            loadConfigData();
            initVersionInfo(); // 初始化版本信息
            initProxySettings(); // 初始化代理设置
            
            // 确保页面加载后域名输入框能够正确获取焦点
            setTimeout(() => {
                domainInput.focus();
            }, 500);
        });
    </script>
</body>

</html>